<template>
  <a-card title="问题管理" :bordered="false">
    <template #extra>
      <a-button type="primary" @click="operate('新增', {})">
        <plus-outlined />
        新增
      </a-button>
    </template>
    <a-form ref="formStateRef" :model="formState" layout="inline">
      <a-form-item name="describe" label="" :colon="false" style="margin: 10px;margin-left:0px;">
        <a-input icon=prefix allow-clear v-model:value="formState.describe" placeholder="请输入问题描述" style="width: 220px">
          <template #prefix>
           <img src="../../assets/img/search.svg" alt="" class="searchIcon">
          </template>
        </a-input>
      </a-form-item>
      <a-form-item name="code" label="项目编号" :colon="false" style="margin: 10px;">
        <a-select size="large" v-model:value="formState.code" allow-clear style="width: 220px"
          :fieldNames="{ label: 'label', value: 'value' }" :options="data.projectList" placeholder="请选择">
        </a-select>

      </a-form-item>
      <a-form-item name="followPerson" label="跟进人" :colon="false" style="margin: 10px;">
        <a-select size="large" v-model:value="formState.followPerson" allow-clear style="width: 220px"
          :fieldNames="{ label: 'label', value: 'id' }" :options="data.addressbook" placeholder="请选择">
        </a-select>

      </a-form-item>
      <a-form-item name="state" label="问题状态" :colon="false" style="margin: 10px;">
        <a-select size="large" v-model:value="formState.state" allow-clear style="width: 220px"
          :fieldNames="{ label: 'label', value: 'value' }" :options="data.stateList" placeholder="请选择">
        </a-select>

      </a-form-item>
      <a-form-item style="margin: 10px 10px 10px 0px;">
        <a-button type="primary" ghost html-type="submit" @click="query">
          查询
        </a-button>
        <a-button @click="reset" style="margin-left: 10px"> 重置 </a-button>
      </a-form-item>
    </a-form>
    <a-table :columns="columns" :data-source="data.tableList" :pagination="false" bordered :loading="data.loading"
      style="margin: 15px 0px;">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'state'">
          <span v-if="record.state == '1'">待处理</span>
          <span v-if="record.state == '2'">已处理</span>
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a-button type="link" @click="operate('查看', record)">查看</a-button>
          <a-button type="link" v-if="record.state == '2'" @click="operate('处理', record)">处理</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination v-model:pageSize="pageSize" v-model:current="current" show-size-changer show-quick-jumper
      @change="onChange" :total="data.total" :show-total="() => `共 ${data.tableList.length}条`" />
  </a-card>
  <!-- 新增、编辑、查看 -->
  <view-dialog ref="formEdit" :row="row" :title="title" @onSumbit="onSumbit" />
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { PlusOutlined } from "@ant-design/icons-vue";
import type { UnwrapRef } from "vue";
import viewDialog from './child/view.vue';
import moment from 'moment'
let current = ref<number>(1);
let pageSize = ref<number>(10);
let row = ref<any>({});
let title = ref<string>('');
const formStateRef = ref<any>();
let formEdit = ref<any>(null);
interface FormState {
  describe: string | undefined;
  code: string | undefined;
  followPerson: string | undefined;
  state: string | undefined;
}
const formState: UnwrapRef<FormState> = reactive({
  describe: '',
  code: undefined,
  followPerson: undefined,
  state: undefined
});
const data = reactive<any>({
  tableList: [{
    id: 1,
    describe: 'if层级过高',
    followPerson: '张三',
    state: '1',
    date: '2024-08-22',
    project: 'YXQT-705',
    reviewTopics: '这是个主题',
    participants: '张张张',
    absentPerson: '程程程',
    recorders: '小胖子',
    recordTime: '2024-08-08',
    itemNumber: 'x-01',
    serviceName: 'XXX',
    serviceUnit: '123123',
    tableList: [{
      description: '这没有问题',
      suggested: '无建议',
      followPerson: '王五',
      latestTime: '2021-08-07'
    }]
  }, {
    id: 2,
    describe: '接口入参没用的@Valid，可以删掉   ',
    followPerson: '李四',
    state: '2',
    date: '2024-08-22',
    project: 'YXQT-705',
    reviewTopics: '这是个问题',
    participants: '张张张',
    absentPerson: '程程程',
    recorders: '小胖子',
    recordTime: '2024-08-08',
    itemNumber: 'x-01',
    serviceName: 'XXX',
    serviceUnit: '123123',
    tableList: [{
      description: '这没有问题',
      suggested: '无建议',
      followPerson: '赵六',
      latestTime: '2021-08-07'
    }]
  }],
  loading: false,
  total: 0,
  projectList: [],
  addressbook: [{
    label: '张三',
    id: '1'
  }, {
    label: '李四',
    id: '2'
  }],
  stateList: [{
    label: '待处理',
    value: '1'
  }, {
    label: '已处理',
    value: '2'
  }]
})
const columns = reactive<any>([
  {
    title: "序号",
    scopedSlots: "num",
    width: 70,
    customRender: ({ text, index }: any) => `${(current.value - 1) * pageSize.value + (index + 1)}`,
  },
  {
    title: "问题描述",
    dataIndex: "describe",
    key: "describe",
    sorter: true,
    ellipsis: true,
  },
  {
    title: "跟进人",
    dataIndex: "followPerson",
    key: "followPerson",
    ellipsis: true,
  },
  {
    title: "问题状态",
    dataIndex: "state",
    key: "state",
    ellipsis: true,
  },
  {
    title: "解决时间",
    dataIndex: "date",
    key: "date",
    ellipsis: true,
    customRender: ({ text, index }: any) => {
      return text == null ? '' : moment(text).format('YYYY-MM-DD')
    }
  },
  {
    title: "所属项目",
    dataIndex: "project",
    key: "project",
    ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);
const operate = (str: string, record: any) => {
  title.value = str;
  row.value = record;
  formEdit.value.openModel();
}
const onSearch = () => {

}
const query = () => {

}
const reset = () => {
  formStateRef.value.resetFields()
}
const getTable = () => {
  // data.loading = true;
}
const onSumbit = () => {
  current.value = 1;
  getTable();
}

const onChange = (num: number) => {
  current.value = num;
  getTable();
};
onMounted(() => {
  getTable();
});
</script>

<style scoped lang="less">
.searchIcon{
  width: 20px;
  height:20px;
  margin-top: -4px;
}
:deep(.ant-form-item-control-input-content) {
  height: 40px;
}

:deep(.ant-input-affix-wrapper) {
  height: 40px;
  padding: 0px 8px;

  input {
    height: 30px;
  }
}
.ant-btn {
  border-radius: 8px;
  height: 40px;
}
:deep(.ant-table-cell-ellipsis .ant-table-column-title) {
  overflow: initial;
}
</style>
